<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />	
		<link rel="stylesheet" href="css/1.css"/>
		<title>Document</title>
		<script src="https://unpkg.com/vue@next"></script>		
	</head>
	<body>
		<div id="app">
			<div>
				<input type="text" v-model:value="counter" class="cin_item" />				
			</div>		
			<div class="content">
				
				<div class="item0" @click="counter += 0"><button>0</button></div>
				<div class="item1" @click="counter += 1"><button>1</button></div>
				<div class="item2" @click="counter += 2"><button>2</button></div>
				<div class="item3" @click="counter += 3"><button>3</button></div>
				<div class="item4" @click="counter += 4"><button>4</button></div>
				<div class="item5" @click="counter += 5"><button>5</button></div>
				<div class="item6" @click="counter += 6"><button>6</button></div>
				<div class="item7" @click="counter += 7"><button>7</button></div>
				<div class="item8" @click="counter += 8"><button>8</button></div>
				<div class="item9" @click="counter += 9"><button>9</button></div>
			</div>
		</div>
	</body>
	<script>
		const Counter = {
			data(){
				return{					
					counter: 0		
				}				
			},
			methods: {
				sum(){
					this.counter+=1				
				}
			}
		}
		Vue.createApp(Counter).mount('#app')
	</script>
</html>
